<template>
  <el-select
    v-model="content"
    :popper-append-to-body="false"
    placeholder=""
    :size="size"
    :clearable="false"
    :class="['commom-select', className]"
    :style="{ width, height }"
  >
    <el-option
      v-for="item in options"
      :key="item[id]"
      :label="item[name]"
      :value="item[id]"
    />
  </el-select>
</template>
<script>
export default {
  name: "g-select",
  props: {
    // 绑定数据
    value: {
      type: [String, Number],
      default: "",
    },
    // 大小
    size: {
      type: String,
      default: "mini",
    },
    // 选项
    options: {
      type: Array,
      default: () => [],
    },
    // 类
    className: {
      type: String,
      default: "",
    },
    // 宽度
    width: {
      type: String,
      default: "91px",
    },
    height: {
      type: String,
      default: "28px",
    },
    // 选项label
    name: {
      type: String,
      default: "name",
    },
    // 选项value
    id: {
      type: String,
      default: "id",
    }
  },
  data() {
    return {};
  },
  computed: {
    content: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
        this.$emit("change", val);
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.commom-select {
  background: url("~@/assets/select-bg.png") no-repeat;
  background-size: 100% 100%;
  &:hover {
    height: 28px;
    background: url("~@/assets/select-bg-hover.png") no-repeat;
    background-size: 100% 100%;
  }
  &:active {
    height: 28px;
    background: url("~@/assets/select-bg-active.png") no-repeat;
    background-size: 100% 100%;
  }
}
::v-deep .el-input__prefix {
  display: none !important;
}
::v-deep .el-input__suffix {
  display: none !important;
}
::v-deep .el-input__inner {
  text-align: center;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  color: #fff !important;
  &::placeholder {
    color: #fff;
  }
}
::v-deep .el-select-dropdown {
  background-color: rgba(1, 18, 81, 0.4) !important;
  backdrop-filter: blur(3px);
  .el-select-dropdown__item {
    color: #fff;
  }
  .el-select-dropdown__item.selected {
    color: rgb(6, 193, 255) !important;
  }
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background-color: rgba(0, 0, 0, 0.4) !important;
  }
}
</style>
